<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminLTE 3 | Vue3 | 组件化Layout,Fullscreen,PushMenu</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="css/adminlte.min.css">
</head>
<body>
    <div id="app">
      <lte-layout logo="img/AdminLTELogo.png" preloader-visible preloader-auto-close>
        <!-- 顶部页头 -->
        <nav class="main-header navbar navbar-expand navbar-white navbar-light" style="min-height:3.5rem;">
          <ul class="navbar-nav">
            <li class="nav-item">
              <lte-push-menu></lte-push-menu>
            </li>
          </ul>
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <lte-fullscreen></lte-fullscreen>
            </li>
          </ul>
        </nav>

        <!-- 左侧菜单 -->
        <aside class="main-sidebar sidebar-dark-primary elevation-4">
          <a href="#" class="brand-link">
            <img src="img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
            <span class="brand-text font-weight-light">AdminLTE 3 + Vue3</span>
          </a>
          <!-- Sidebar -->
          <div class="sidebar">
            <!-- Sidebar user panel (optional) -->
            <div class="user-panel mt-3 pb-3 mb-3 d-flex">
              <div class="image">
                <img src="img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
              </div>
              <div class="info">
                <a href="#" class="d-block">Alexander Pierce</a>
              </div>
            </div>

            <!-- SidebarSearch Form -->
            <div class="form-inline" style="overflow: hidden;">
              <div class="input-group" data-widget="sidebar-search">
                <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
                <div class="input-group-append">
                  <button class="btn btn-sidebar">
                    <i class="fas fa-search fa-fw"></i>
                  </button>
                </div>
              </div>
            </div>

            <!-- Sidebar Menu -->
            <nav class="mt-2 mb-2">
              <!-- 还可以使用default-menu-url="#dashboardv2"设置默认菜单，如果两个属性同时使用，先找到哪个算哪个 -->
              <lte-tree-menu :menus="menus" default-menu-id="3" ></lte-tree-menu>
            </nav>
          </div>
          <!-- /.sidebar -->
        </aside>

        <!-- 工作区 -->
        <div class="content-wrapper">
          <menu-style-sets></menu-style-sets>
        </div>

        <!-- 底部页脚 -->
        <footer class="main-footer" style="min-height:3.5rem;">
          Footer
        </footer>
      </lte-layout>
    </div>
</body>
<script src="js/vue.global.3.2.26.js"></script>
<!-- 动画 -->
<script src="js/animations.js"></script>
<!-- 可复用逻辑 -->
<script src="js/toggleMenu.js"></script>
<!-- 组件 -->
<script src="js/LayoutProvide.js"></script>
<script src="js/PushMenuInject.js"></script>
<script src="js/Fullscreen.js"></script>
<script src="js/TreeMenu.js"></script>

<script>
  Array.prototype.indexOf = function(val) { 
    for (var i = 0; i < this.length; i++) { 
      if (this[i] == val) return i; 
    } 
    return -1; 
  };
  Array.prototype.remove = function(val) { 
    var index = this.indexOf(val); 
    if (index > -1) { 
      this.splice(index, 1); 
    } 
  }; 

  const MenuStyleSets = {
    name: "MenuStyleSets",
    setup() {
      const setMenuStyle = Vue.inject('setMenuStyle');

      const styles = [];
      const navStyleChange = e=> {
        console.log(e);
        let value = e.target.value;
        console.log(value);
        if (e.target.checked) {
          styles.push(value);
        } else {
          styles.remove(value);
        }
        console.log(styles.join(" "));
        setMenuStyle(styles);
      }

      // 获取当前菜单的方法
      const getCurrentMenu = Vue.inject("getCurrentMenu");

      const menu = Vue.ref({});
      const getMenu = ()=> {
        // 将当前菜单赋值给响应式变量
        menu.value = getCurrentMenu() || {title: "当前没有选中菜单"};
      }

      return {
        menu,
        getMenu,
        navStyleChange
      }
    },
    template: `
    <div style="width:100%;min-height: 400px;display:flex; flex-direction: column; justify-content:center;align-items:center;">
      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">
                <i class="fas fa-ellipsis-v"></i>
                当前菜单
              </h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
              <div class="input-group input-group-sm">
                <input type="text" class="form-control" placeholder="当前菜单" :value="menu.title">
                <span class="input-group-append">
                  <button type="button" class="btn btn-info btn-flat"  @click="getMenu">获取</button>
                </span>
              </div>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- ./col -->
      </div>
      <div class="position-relative p-3 bg-info" style="height: 180px;width: 300px;margin-top:10px;">
        <div class="ribbon-wrapper ribbon-lg">
          <div class="ribbon bg-success text-lg">
            Menu Style
          </div>
        </div>
        <div>
          <div class="mb-1"><input type="checkbox" value="nav-flat" class="mr-1" @change="navStyleChange"><span>Nav Flat Style</span></div>
          <div class="mb-1"><input type="checkbox" value="nav-legacy" class="mr-1" @change="navStyleChange"><span>Nav Legacy Style</span></div>
          <div class="mb-1"><input type="checkbox" value="nav-compact" class="mr-1" @change="navStyleChange"><span>Nav Compact</span></div>
          <div class="mb-1"><input type="checkbox" value="nav-child-indent" class="mr-1" @change="navStyleChange"><span>Nav Child Indent</span></div>
          <div class="mb-1"><input type="checkbox" value="nav-collapse-hide-child" class="mr-1" @change="navStyleChange"><span>Nav Child Hide on Collapse</span></div>
        </div>
      </div>
    </div>
    `
  }
  Vue.components.push(MenuStyleSets);
</script>

<script type="text/javascript">
  const app = Vue.createApp({
    setup() {
      // 虚拟菜单
      const menus = [{
        title: "Dashboard",
        icon: "fas fa-tachometer-alt",
        children: [{
          id: 1,
          title: "Dashboard v1",
          isActive: true,
          icon: "far fa-circle",
          url: "#dashboardv1"
        },{
          id: 2,
          title: "Dashboard v2",
          icon: "far fa-circle",
          url: "#dashboardv2"
        },{
          id: 3,
          title: "Dashboard v3",
          icon: "far fa-circle",
          url: "#dashboardv3"
        }]
      }, {
        title: "Widgets",
        icon: "fas fa-th",
        isNew: true,
        url: "#widgets"
      },{
        title: "Layout Options",
        icon: "fas fa-copy",
        messageCount: 6,
        isNew: true,
        children: [{
          title: "Top Navigation",
          icon: "far fa-circle",
        },{
          title: "Top Navigation + Sidebar",
          icon: "far fa-circle",
        }]
      },{
        title: "Charts",
        icon: "fas fa-chart-pie",
        children: [{
          title: "ChartJS",
          icon: "far fa-circle",
        },{
          title: "Flot",
          icon: "far fa-circle",
        }]
      },{
        title: "UI Elements",
        icon: "fas fa-tree",
        children: [{
          title: "General",
          icon: "far fa-circle",
        },{
          title: "Icons",
          icon: "far fa-circle",
        }]
      },{
        title: "Forms",
        icon: "fas fa-edit",
        children: [{
          title: "General Elements",
          icon: "far fa-circle",
        },{
          title: "Advanced Elements",
          icon: "far fa-circle",
        }]
      },{
        title: "Tables",
        icon: "fas fa-table",
        children: [{
          title: "Simple Tables",
          icon: "far fa-circle",
        }]
      },{
        title: "EXAMPLES",
        type: "label"
      },{
        title: "Calendar",
        icon: "fas fa-table",
        messageCount: 2
      },{
        title: "Gallery",
        icon: "fas fa-image"
      },{
        title: "Level 1",
        icon: "fas fa-circle",
        children: [{
          title: "Level 2",
          children: [{
            title: "Level 3",
          },{
            title: "Level 3",
          }]
        },{
          title: "Level 2",
          children: [{
            title: "Level 3",
          },{
            title: "Level 3",
          }]
        }]
      },{
        title: "Baidu",
        icon: "fas fa-link",
        messageCount: 2,
        url: "http://www.baidu.com",
        target: "_blank"
      }];

      return {
        menus
      }
    }
  });
  Vue.components.forEach(element => {
    app.component(element.name, element);
  });
  app.mount('#app');
</script>

<style>
  /* 菜单选中时，父级菜单背景色渐显效果
  .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
  .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
    transition: background ease-in-out .3s, width ease-in-out .3s;
  } */
</style>
</html>